<template>
  <view
    class="page-root"
    :style="{ paddingTop: useSafeArea.getSafeAreaTop + 40 + 'px' }"
  >
    <view class="w-[100%] flex items-center justify-center mb-4">
      <text class="text-[20px] font-bold">设置</text>
    </view>

    <view class="card">
      <view class="row" @click="clearCache">
        <view class="icon">
          <wd-icon name="user" size="22px"></wd-icon>
        </view>
        <text class="label">清除缓存</text>
        <view class="arrow">
          <wd-icon name="arrow-right" size="16px"></wd-icon>
        </view>
      </view>

      <view class="divider" />

      <view class="row" @click="callRescueHotline">
        <view class="icon">
          <wd-icon name="phone" size="22px"></wd-icon>
        </view>
        <text class="label">救助热线</text>
        <view class="arrow">
          <wd-icon name="arrow-right" size="16px"></wd-icon>
        </view>
      </view>
    </view>

    <view class="foot-space" />
  </view>
</template>

<script setup lang="ts">
import useStore from '@/store'

const { useSafeArea } = useStore()

// 拨打救助热线
function callRescueHotline() {
  uni.makePhoneCall({
    phoneNumber: '0859-9523333',
    success: () => {
      console.log('拨打救助热线成功')
    },
    fail: (err) => {
      console.error('拨打救助热线失败:', err)
      uni.showToast({
        title: '拨号失败',
        icon: 'none'
      })
    }
  })
}

// 清除缓存
function clearCache() {
  try {
    // 清空所有storage
    uni.clearStorageSync()

    // 显示成功提示
    uni.showToast({
      title: '缓存已清除',
      icon: 'success',
      duration: 2000
    })

    console.log('缓存清除成功')
  } catch (error) {
    console.error('清除缓存失败:', error)
    uni.showToast({
      title: '清除失败',
      icon: 'none'
    })
  }
}
</script>

<style scoped>
/* 基础布局 */
.page-root {
  min-height: 100vh;
  background: #f7f8fa;
  padding: 20px;
  box-sizing: border-box;
  /* iOS 顶部安全区备用 */
}

/* card */
.card {
  background: #ffffff;
  border-radius: 14px;
  padding: 8px 0;
  /* 轻微阴影，微信小程序中 shadow 兼容 */
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* 行 */
.row {
  display: flex;
  align-items: center;
  height: 72px;
  padding: 0 18px;
  cursor: pointer;
}
.icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827; /* icon 颜色 */
  margin-right: 12px;
  flex-shrink: 0;
}
.label {
  font-size: 16px;
  color: #0f172a;
  flex: 1;
}

/* 右侧箭头 */
.arrow {
  width: 22px;
  height: 22px;
  color: #9aa4b2;
  flex-shrink: 0;
}

/* 分隔线（卡片内） */
.divider {
  height: 1px;
  background: #f0f2f5;
  margin: 0 14px;
}

/* 底部留白，避免被底部 tab 或手势遮挡 */
.foot-space {
  height: 120px;
}
</style>
